<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>sytht登录页面</title>
		<link rel="icon" href="/tuPian/tuBiao.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	</head>
	<style>
		html,body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#rong-qi {
			width: 100%;
			height: 100%;
			background-color: #9dc8fe;
			display: flex;
			justify-content: center;
			align-items:center;
		}
		form {
			width: 25%;
			height: 40%;
			border: solid #939393 1px;
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 0.2);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items:center;
		}
		@media screen and (max-width: 750px) {
			form {
				width: 95%;
				height: 40%;
			}
		}
		#biao-ti {
			font-size: 20px;
			color: #ffffff;
		}
		input {
			width: 60%;
			height: 35px;
			margin-top: 15px;
			padding: 0 10px;
			border: none;
			border-radius: 3px;
		}
		input:nth-of-type(3)  {
			color: #ffffff;
			font-size: 17px;
			background-color: #3064d6;
		}
		span {
			margin-top: 5px;
			color: #e80000;
			width: 60%;
			height: 20px;
		}
	</style>
	<script>
		fetch(`/sytht`, {
				method: 'get',
				headers: {
					'Content-Type': 'application/json'
				},
				mode: 'cors',
				credentials: 'include'
			})
			.then(function(xiangYing) {
				return xiangYing.text();
			})
			.then(function(a) {
				if (!a.includes('登录页面')) window.location.pathname = '/sytht';
			})
	</script>
	<body>
		<div id="rong-qi">
			<form onsubmit="dengLu(event)">
				<div id="biao-ti">syt后台</div>
				<input id="ming-zi" value="" placeholder="用户名" oninput="qingChuBaoCuo()" autocomplete="off"/>
				<span id="bao-cuo1"></span>
				<input id="mi-ma" type="password" value="" placeholder="密码" oninput="qingChuBaoCuo()" autocomplete="off"/>
				<span id="bao-cuo2"></span>
				<input type="submit" value="登录" />
			</form>
		</div>
		<script>
			function qingChuBaoCuo() {
				document.querySelector('#bao-cuo1').innerHTML = ''
				document.querySelector('#bao-cuo2').innerHTML = ''
			}
			function dengLu(event) {
				event.preventDefault();
				let  mingZi = document.querySelector('#ming-zi').value;
				let  miMa = document.querySelector('#mi-ma').value;
				fetch(`/dengLu?mingZi=${mingZi}&miMa=${miMa}`, {
						method: 'get',
						headers: {
							'Content-Type': 'application/json'
						},
						mode: 'cors',
						credentials: 'include'
					})
					.then(function(xiangYing) {
						return xiangYing.text();
					})
					.then(function(a) {
						console.log(a)
						if (a == '登录成功') {
							window.location.pathname = '/sytht'
						}
						if (a == '用户名不存在') {
							document.querySelector('#bao-cuo1').innerHTML = a
						}
						if (a == '密码错误') {
							document.querySelector('#bao-cuo2').innerHTML = a
						}
					})
			}
		</script>
	</body>
</html>
